// 系统入口（登录）页面

import { Formik } from 'formik';
import * as yup from 'yup';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
// import RefreshIcon from '@mui/icons-material/Refresh';
import { Button, TextField, Container, CssBaseline, Box, Avatar, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import Copyright from './ui/Copyright';
import './App.css';
import './lang/uilabels';
import userService from './api/UserService';

function App() {
  const { t, i18n } = useTranslation();
  const validationSchema = yup.object({
    email: yup
      .string(t('email'))
      // .email('Enter a valid email')
      .required('Email is required'),
    password: yup
      .string('password')
      .min(8, 'Password should be of minimum 8 characters length')
      .required('Password is required'),
  });

  i18n.changeLanguage('zh');

  return (
    <div className="App">
      <ThemeProvider theme={createTheme()}>
        <Container component="main" maxWidth="xs">
          {/* <Button onClick={() => window.location.reload()}>
            <RefreshIcon />
          </Button> */}
          <CssBaseline />
          <Box
            sx={{
              marginTop: 8,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              {t("Signin")}
            </Typography>
            <Box noValidate sx={{ mt: 1 }}>
              <Formik
                initialValues={validationSchema.default()}
                validationSchema={validationSchema}
                onSubmit={async (values, { setSubmitting }) => {
                  let user = await userService.getUser(values.email);
                  if (user && user.length > 0) {
                    window.location.href = './dwz_jui-master/index.html';
                  } else {
                    window.api.error('登录失败，请确认账户信息');
                  }
                  setSubmitting(false);
                }}
              >
                {({
                  values,
                  // errors,
                  // touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                }) => (
                  <form onSubmit={handleSubmit}>
                    <TextField
                      margin="normal"
                      required
                      fullWidth
                      id="email"
                      label={t('account')}
                      name="email"
                      onChange={handleChange}
                      onBlur={handleBlur}
                      value={values.email || ''}
                    />
                    <TextField
                      margin="normal"
                      required
                      fullWidth
                      name="password"
                      label={t('password')}
                      type="password"
                      id="password"
                      onChange={handleChange}
                      onBlur={handleBlur}
                      value={values.password || ''}
                    />

                    <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      disabled={isSubmitting}
                      sx={{ mt: 3, mb: 2 }}
                    >
                      {t('login')}
                    </Button>
                  </form>
                )}
              </Formik>
            </Box>
          </Box>
          <Copyright sx={{ mt: 8, mb: 4 }} style={{ marginTop: 20, textAlign: "center", }} />
        </Container>
      </ThemeProvider>
    </div>
  );
}

export default App;
